<template>
  <el-form ref="form" :model="form" label-width="80px">
    <div v-for="(item, index) in formData" :key="index">
      <!---------- input ----------->
      <div
          v-if="item.type == 'input'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label" :rules="item.required">
            <el-input
                v-model="item.value"
                :name="item.name"
                :disabled="item.is_disabled"
                :placeholder="item.placeholder"
            ></el-input>
          </el-form-item>
        </el-alert>
      </div>
      <!---------- select ------------->
      <div
          v-else-if="item.type == 'select'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label" :rules="item.required">
            <el-select v-model="item.value" :disabled="true">
              <div v-for="(v, i) in item.data" :key="i">
                <el-option :label="v" :value="v"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-alert>
      </div>
      <!----------- textarea ------------->
      <div
          v-else-if="item.type == 'textarea'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label" :rules="item.required">
            <el-input
                type="textarea"
                v-model="item.value"
                :name="item.name"
                :disabled="item.is_disabled"
            ></el-input>
          </el-form-item>
        </el-alert>
      </div>
      <!---------- switch -------------->
      <div
          v-else-if="item.type == 'switch'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label" :rules="item.required">
            <el-switch
                v-model="item.value"
                name="item.name"
                :disabled="item.is_disabled"
            ></el-switch>
          </el-form-item>
        </el-alert>
      </div>
      <!----------- checkbox --------------->
      <div
          v-else-if="item.type == 'checkbox'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label" :rules="item.required">
            <el-checkbox-group v-model="item.value">
              <el-checkbox
                  v-for="v in item.data"
                  :label="v"
                  :key="v"
                  :name="item.name"
                  :disabled="true"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-alert>
      </div>
      <!----------- radio --------------->
      <div
          v-else-if="item.type == 'radio'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label" :rules="item.required">
            <el-radio-group v-model="item.value">
              <el-radio
                  v-for="v in item.data"
                  :label="v"
                  :key="v"
                  :disabled="true"
              ></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-alert>
      </div>
      <!---- 收费方式 ---->
      <div
          v-else-if="item.type == 'component' && item.name == 'is_free'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label" :rules="item.required">
            <el-radio-group v-model="item.value">
              <el-radio
                  v-for="v in item.data"
                  :label="v"
                  :key="v"
                  :disabled="true"
              ></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-alert>
      </div>
      <!-- 关联会议 -->
      <div
          v-else-if="
          item.type == 'component' && item.name == 'is_associated_meeting'
        "
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label">
            <el-input
                type="text"
                v-model="item.value"
                :name="item.name"
                :disabled="item.is_disabled"
            ></el-input>
          </el-form-item>
        </el-alert>
      </div>
      <!-- 早鸟价  -->
      <div
          v-else-if="item.type == 'component' && item.name == 'is_early_bird'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label">
            <el-input
                type="text"
                v-model="item.data.discount"
                placeholder="打几折"
                disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="开始时间" label-width="100px">
            <el-input
                v-model="item.data.period[0]"
                disabled
                style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="结束时间" label-width="100px">
            <el-input
                v-model="item.data.period[1]"
                disabled
                style="width: 400px"
            ></el-input>
          </el-form-item>
        </el-alert>
      </div>
      <!-- 报名人数 -->
      <div
          v-else-if="item.type == 'component' && item.name == 'signup_num'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert
            type="info"
            v-for="(it, idx) in item.data"
            :key="idx"
            @close="remove(item, index)"
        >
          <el-form-item :label="it.label">
            <el-input type="text" v-model="it.value" disabled></el-input>
          </el-form-item>
        </el-alert>
      </div>
      <!-- 是否住宿 -->
      <div
          v-else-if="item.type == 'component' && item.name == 'is_stay'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label" :rules="item.required">
            <div v-for="(it, idx) in item.data" :key="idx">
              <el-form-item label="日期">
                <el-input v-model="it.dayTime" disabled></el-input>
              </el-form-item>
              <el-form-item label="单间">
                <el-form-item label="房间数" class="marginT">
                  <el-input v-model="it.nameOne.roomNum" disabled></el-input>
                </el-form-item>
                <el-form-item label="价格" class="marginT">
                  <el-input v-model="it.nameOne.roomPrice" disabled></el-input>
                </el-form-item>
              </el-form-item>
              <div style="margin-top: 10px"></div>
              <el-form-item label="双间">
                <el-form-item label="房间数" class="marginT">
                  <el-input v-model="it.nameTwo.roomNum" disabled></el-input>
                </el-form-item>
                <el-form-item label="价格" class="marginT">
                  <el-input v-model="it.nameTwo.roomPrice" disabled></el-input>
                </el-form-item>
              </el-form-item>
              <div style="margin-top: 10px"></div>
            </div>
          </el-form-item>
        </el-alert>
      </div>
      <!--------------->
      <!-- 发票相关 -->
      <div
          v-else-if="item.type == 'component' && item.name == 'is_invoice'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label" :rules="item.required">
            <el-input
                :name="item.name"
                :disabled="item.is_disabled"
                :placeholder="item.placeholder"
            ></el-input>
          </el-form-item>
        </el-alert>
      </div>
      <!-- 活动配置 -->
      <div
          v-else-if="item.type == 'component' && item.name == 'is_config'"
          @click="editForm(item.id, index)"
          :class="{ active: currentSort === index }"
          style="margin-bottom: 5px"
      >
        <el-alert type="info" @close="remove(item, index)">
          <el-form-item :label="item.label">
            <div v-for="(it, idx) in item.data" :key="idx">
              <el-form-item :label="it.label" v-if="it.type == 'input'">
                <el-input
                    v-model="it.value"
                    :name="it.name"
                    disabled
                    :placeholder="it.placeholder"
                ></el-input>
              </el-form-item>

              <el-form-item :label="it.label" v-if="it.type == 'datePicker'">
                <el-form-item label="开始时间" label-width="100px">
                  <el-input
                      v-model="it.value[0]"
                      disabled
                      style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="结束时间" label-width="100px">
                  <el-input
                      v-model="it.value[1]"
                      disabled
                      style="width: 300px"
                  ></el-input>
                </el-form-item>
              </el-form-item>
              <el-form-item
                  :label="it.label"
                  v-if="it.type == 'upload'"
                  label-width="100px"
              >
                <el-image
                    :src="it.value"
                    fit="scale-down"
                    style="width: 130px; height: 130px"
                ></el-image>
              </el-form-item>
              <el-form-item
                  :label="it.label"
                  v-if="it.type == 'textarea'"
                  label-width="100px"
              >
                <div v-html="it.value"></div>
                <!-- <div ref="editor" class="text" ></div> -->
              </el-form-item>
            </div>
          </el-form-item>
        </el-alert>
      </div>
    </div>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {saveForm, saveFormEdit} from "@/api";

export default {
  name: "Form",
  props: ['formData', 'form'],
  data() {
    return {
      currentSort: '',
      color:''
    }
  },
  created() {
    let obj = {};
    obj.id = 7;
    obj.label = "配置信息";
    obj.name = "is_config";
    obj.type = "component";
    obj.value = true;
    obj.is_commonly = "";
    obj.is_disabled = true;
    obj.is_required = false;
    obj.placeholder = "";
    obj.config_value = "";
    obj.data = [
      {
        type: "input",
        name: "title",
        label: "活动标题",
        value: "",
      },
      {
        type: "upload",
        name: "banner",
        label: "活动banner",
        value: "",
      },
      {
        type: "datePicker",
        name: "activity_time",
        label: "活动时间",
        value: [],
      },
      {
        type: "input",
        name: "meet_free",
        label: "会务费",
        value: "",
      },
      {
        type: "textarea",
        name: "description",
        label: "活动说明",
        value: "",
      },
    ];
    this.formData.push(obj);
  },
  methods: {
    onSubmit() {
      let data = {
        form_id: this.form_id, //虚拟id
        data: this.formData,
      };
      console.log(data, "提交的表单");
      if (this.mark == "edit") {
        console.log("编辑提交");
        saveFormEdit(data)
            .then((res) => {
              if (res.data.code == 0) {
                this.$message.error(res.data.msg);
              } else {
                this.$message.success("编辑成功");
              }
            })
            .catch((error) => console.log(error));
      } else {
        console("创建提交");
        saveForm(data)
            .then((res) => {
              if (res.data.code == 0) {
                this.$message.error(res.data.msg);
              } else {
                this.$message.success("创建成功");
              }
            })
            .catch((error) => console.log(error));
      }
    },
    editForm(id, index) {
      //查询排除能编辑选择开关
      let data = this.formData;
      data.map((item) => {
        if (item.is_disabled == false) {
          this.currentSort = "";
          return;
        } else {
          //显示选中背景样式
          this.currentSort = index;
        }
      });
      //向父组件传递这条数据的索引，定位
      this.$emit("childHandler", index);
    },
    remove(item, index) {
      console.log(item, "数据信息");
      let data = this.formData;
      data.splice(index, 1);
    },
  },
}
</script>

<style scoped>
.active {
  background: #FFF8DC;
  border: 1px dotted #409EFF;
}
.marginT {
  margin-top: 5px;
}
</style>
